<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<!--
  展示首页, 按照blog的id进行倒排展示所有博客列表
  需要的对象：
    blogs - PageInfo
-->

<head lang="en">
  <meta charset="UTF-8">
  <title>文章列表</title>
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/footer.css">
  <link rel="stylesheet" href="/css/sidbar.css">
  <link rel="stylesheet" href="/css/blog.css">
  <script src="//cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/login">登录</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">首页</a></li>
        <li><a href="#">最近</a></li>
        <li><a href="#">归档</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="/register">注册</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="搜索...">
      </form>
    </div>
  </div>
</nav>

<div class="container">

  <div class="page-header">
    <h1>所有博客的列表
      <small>展示所有的博客,按照发表时间进行倒排</small>
    </h1>
  </div>

  <div class="row">

    <div class="col-sm-8">
      <div class="blog-post" th:each="blog: ${blogs.list}">
        <h3 class="blog-post-title"><a th:text="${blog.title}" th:href="@{'/blog/' + ${blog.id}}">"${blog.title}"</a></h3>
        <p class="blog-post-meta">
          <td class="blog-post-create-date" th:text="${#dates.format(blog.createdTime, 'yyyy年MM月dd日')}">"${blog.createdTime}"</td>
          <a th:text="${blog.author.name}" th:href="@{'/blogger/' + ${blog.author.name}}">"${blog.author.name}"</a>
          标签：<a href="#">Web开发</a></p>
        <p class="blog-post-content" th:text="${blog.content}">"${blog.content}"</p>
      </div>

      <hr>

      <nav>
        <ul class="pager">
          <li th:if="${blogs.hasPreviousPage}" class="previous"><a th:href="@{'/index'+ '?page=' + ${blogs.prePage}}"><span aria-hidden="true">&larr;</span> 上一页</a></li>
          <li th:if="${blogs.hasNextPage}" class="next"><a th:href="@{'/index'+ '?page=' + ${blogs.nextPage}}">下一页 <span aria-hidden="true">&rarr;</span></a></li>
        </ul>
      </nav>

    </div>

    <div class="col-sm-3 col-sm-offset-1">
      <div class="sidebar-module sidebar-module-inset">
        <div class="avatar">
          <img class="img-circle img-rounded img-thumbnail avatar" src="/img/catty.jpeg">
          <div>
            <h4>Lorem</h4>
            <a>lorem@example.com</a>
          </div>
        </div>
        <p>Ornare sapien rhoncus, nec mi hendrerit. Ante aliquam dui arcu, diam sodales erat felis dolor sed in, nec
          placerat non.</p>
      </div>
      <div class="sidebar-module">
        <h4>归档</h4>
        <ol class="list-unstyled">
          <li><a href="#">2015年03月</a></li>
          <li><a href="#">2015年02月</a></li>
          <li><a href="#">2015年01月</a></li>
          <li><a href="#">2014年12月</a></li>
          <li><a href="#">2014年11月</a></li>
          <li><a href="#">2014年10月</a></li>
          <li><a href="#">2014年09月</a></li>
          <li><a href="#">2014年08月</a></li>
          <li><a href="#">2014年07月</a></li>
        </ol>
      </div>
    </div>

  </div>

</div>

<footer>
  &copy; 2020 半圆学社, Inc. &middot; <a href="#">隐私</a> &middot; <a href="#">条款</a>
</footer>

</body>
</html>
